import React, { createRef, Component } from 'react'
import BetterScroll from 'better-scroll'
import bsStyle from './style.module.css'

class MyScroll extends Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }
  bs = null

  componentDidMount() {
    // 宏任务
    setTimeout(() => {
      this.bsFunc()
    }, 500)
  }

  bsFunc = () => {
    const { pullDown, pullUp } = this.props
    this.bs = new BetterScroll(this.myRef.current, {
      // 开启 下拉
      pullDownRefresh: {
        threshold: 50, // 阀值
        stop: 20,
      },
      // 开启 上拉
      pullUpLoad: {
        threshold: -10,
      },
    })
    // 监听事件
    this.bs.on('pullingDown', () => {
      // 子父 传参
      pullDown &&
        pullDown((res) => {
          console.log('下拉')

          this.bs.finishPullDown()
        })
    })

    this.bs.on('pullingUp', () => {
      console.log('上拉')
      pullUp &&
        pullUp((res) => {
          console.log('结束上拉')

          this.bs.finishPullUp()
          this.bs.refresh()
        })
    })
  }

  // 防止内存泄漏操作
  componentWillUnmount() {
    this.bs = null
  }

  render() {
    return (
      <div ref={this.myRef} className={bsStyle['bs-wrapper']}>
        <div className={bsStyle['bs-content']}>{this.props.children}</div>
      </div>
    )
  }
}

export default MyScroll

// class MyScroll extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: false,
//     }
//     this.myRef = createRef()
//   }
//   bs = null
//   componentDidMount() {}

//   static getDerivedStateFromProps(nextProps, prevState) {
//     // console.log('getDerivedStateFromProps:', nextProps, prevState)
//     if (nextProps.children.length) {
//       return { ...prevState, flag: true }
//     }
//     return null
//   }

//   componentDidUpdate() {
//     console.log('componentDidUpdate', this.state.flag)
//     // if (this.state.flag) {
//     // this.bs.refresh()
//     // }
//   }

//   shouldComponentUpdate(props, state) {
//     if (props.children.length) {
//       console.log('shouldComponentUpdate')
//       this.bsFunc()
//       // this.bs.refresh()
//       return true
//     } else {
//       return false
//     }
//   }

//   bsFunc = () => {
//     const { handlePullingDown, handlePullingUp } = this.props
//     this.bs = new BetterScroll(this.myRef.current, {
//       // 开启 下拉
//       pullDownRefresh: {
//         threshold: 50, // 阀值
//         stop: 20,
//       },
//       // 开启 上拉
//       pullUpLoad: {
//         threshold: -10,
//       },
//     })
//     // 监听事件
//     this.bs.on('pullingDown', () => {
//       console.log('下拉')
//       // 子父 传参
//       handlePullingDown &&
//         handlePullingDown((res) => {
//           this.bs.finishPullDown()
//         })
//     })

//     this.bs.on('pullingUp', () => {
//       console.log('上拉')
//       handlePullingUp &&
//         handlePullingUp((res) => {
//           console.log('结束上拉')
//           this.bs.finishPullUp()
//         })
//     })
//   }

//   // 防止内存泄漏操作
//   componentWillUnmount() {
//     this.bs = null
//   }

//   render() {
//     return (
//       <div ref={this.myRef} className={bsStyle['bs-wrapper']}>
//         <div className={bsStyle['bs-content']}>{this.props.children}</div>
//       </div>
//     )
//   }
// }

// export default MyScroll
